---
title: Authenticator
description: Authenticator component adds complete authentication flows to your application with minimal boilerplate.
supportedFrameworks: android|angular|flutter|react|react-native|swift|vue
---

import { Fragment } from '@/components/Fragment';
import { AppDirectoryAlert } from '@/components/AppDirectoryAlert';

import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';
import { NextSteps } from './NextSteps';
import { FRAMEWORKS } from '@/data/frameworks';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

<Fragment useCommonWebContent>
  {({ platform }) => import(`./intro.${platform}.mdx`)}
</Fragment>

## Quick start

<Fragment platforms={['react']}>
  {({ platform }) => import('@/components/AppDirectoryAlert')}
</Fragment>

<Fragment platforms={['android','flutter','react','react-native','swift']}>
  {({ platform }) => import('./quick-start.mdx')}
</Fragment>

<Fragment platforms={['angular']}>
  {({ platform }) => import('./quick-start.angular.mdx')}
</Fragment>

<Fragment platforms={['vue']}>
  {({ platform }) => import('./quick-start.vue.mdx')}
</Fragment>

<NextSteps />